<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.earthrotate{
				width: 310px;
				height: 310px;
				background-image: url(images/earth.png);
				border-radius: 800px;
				/* 设置坐标系 */
				position: relative;
				/* 创建动画 设置参数
				run动画名称 2s执行时间 infinite反复执行
				它的速度不均匀 前快 后慢不统一 解决方法
				：linear*/
			
				animation: run 4s  linear infinite;
				
				
				 
				/* transition:height 4s; */
				
			}
			/* 定义动画的关键帧  变形（形状的变化） transform
			rotate旋转 0deg 从0 开始*/
			@-webkit-keyframes run{
				from{transform:rotate(0deg)}
				to{transform:rotate(360deg)}
			} 
			 @-webkit-keyframes move{
				from{left:0px}
				to{left:400px}
			} 
			.earthrotate:hover{
				animation-play-state: paused;
				height: 200px;
			}
			.
					
		</style>
	</head>
	<body>
		<h3>地球旋转动画效果</h3>
		<div class="earthrotate"></div>
	</body>
</html>
